<template>
  <div class="left-banner-item">
    <div :class="['submenu',{'height-auto':heightAuto}]">
      <el-checkbox-group v-if="itemBanner.childName&&itemBanner.childName.length>0"
        v-model="checkList"
        @change="changeRadio">
        <p v-for="(item, j) in itemBanner.childName"
          :key="j+'-radio'">
          <el-checkbox :label="item.id?item.value:item"
            :key="item.id?item.value:item">
            <span class="flex-span">
              <el-tooltip class="item"
                effect="dark"
                :content="item.id?item.value:item"
                placement="top">
                <span class="text">
                  <span v-if="item.image"
                    class="iti-flag"
                    :class="item.image"
                    style="margin-right: 6px">
                    <svg-icon class="svgIcon"
                      :icon-class="item.image" />
                  </span>
                  {{item.id?item.value:item}}
                </span>
              </el-tooltip>
              <!-- <b>（{{itemBanner.childCount?itemBanner.childCount[j]:0}}）</b> -->
            </span>
          </el-checkbox>
        </p>
      </el-checkbox-group>
      <el-empty v-else
        description="暂无数据"></el-empty>
    </div>
    <el-row v-if="itemBanner.childName&&itemBanner.childName.length>10"
      type="flex"
      justify="center"
      class="p-t">
      <svg-icon v-show="!heightAuto"
        class-name="size-icon"
        icon-class="moreSvg"
        @click="clickMore" />
      <svg-icon v-show="heightAuto"
        class-name="size-icon"
        icon-class="moreSvg"
        class="up-icon"
        @click="clickMoreDel" />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'LeftBannerItem',
  props: ['itemBanner', 'leftForm'],
  data() {
    return {
      heightAuto: false,
      checkList: []
    }
  },
  methods: {
    changeRadio() {
      const item = this.itemBanner.fieldName
      const name = this.itemBanner.name
      const res = this.checkList
      this.$emit('changeLeft', { item, name, res })
    },
    clearRadio() {
      this.checkList = []
    },
    clickMore() {
      this.heightAuto = true
    },
    clickMoreDel() {
      this.heightAuto = false
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep.submenu {
  width: 100%;
  // height: 290px;
  overflow: hidden;
  padding: 10px 12px 0;
  transition: 1s;
  &.height-auto {
    height: auto;
    transition: 1s;
  }
  .el-empty {
    padding: 0;
    .el-empty__image {
      width: 100px;
    }
  }
  .el-radio-group {
    width: 100%;
  }
  p {
    cursor: pointer;
    width: 100%;
    padding: 6px 0;
    &:hover {
      background: rgba(57, 106, 255, 0.08);
    }
    .el-checkbox {
      display: flex;
      align-items: center;
    }
    .el-checkbox__label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4c525b;
      flex: 1;
      .flex-span {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      b {
        color: #7f889b;
      }
    }
  }
}
.text {
  display: inline-block;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.size-icon {
  position: absolute;
  bottom: -10px;
  cursor: pointer;
  font-size: 16px;
  color: #396aff;
}
.up-icon {
  transform: rotate(180deg);
}
</style>